<template>
  <div class="leader-approval">
    <div class="wrap">
      <!-- 顶部步骤条（突出第 2 步：申请审批） -->
      <div class="steps">
        <div v-for="(s,i) in steps" :key="i" class="step" :class="{ active: i <= 1 }">
          <div class="dot">{{ i + 1 }}</div>
          <div class="name">{{ s }}</div>
          <div v-if="i < steps.length - 1" class="line" />
        </div>
      </div>

      <div class="content">
        <!-- 左侧：基本信息、申请信息 -->
        <div class="left">
          <div class="card">
            <div class="card-title">基本信息</div>
            <el-descriptions :column="2" border label-class-name="desc-label" class="desc">
              <el-descriptions-item label="单据编号">TZ2048101015000001</el-descriptions-item>
              <el-descriptions-item label="老人姓名">高启强</el-descriptions-item>
              <el-descriptions-item label="老人身份证号">230201397072210209</el-descriptions-item>
              <el-descriptions-item label="联系方式">13899888888</el-descriptions-item>
              <el-descriptions-item label="费用期限">2048-10-10 —— 2049-10-10</el-descriptions-item>
              <el-descriptions-item label="护理等级">特级护理等级</el-descriptions-item>
              <el-descriptions-item label="入住床位">101床位</el-descriptions-item>
              <el-descriptions-item label="签约合同">
                高启强长住合同.pdf
                <el-button link type="primary" size="small" style="margin-left: 8px">查看</el-button>
              </el-descriptions-item>
              <el-descriptions-item label="养老顾问">屠延桦</el-descriptions-item>
              <el-descriptions-item label="护理员">盛长松、盛明兰、盛如兰</el-descriptions-item>
            </el-descriptions>
          </div>

          <div class="card">
            <div class="card-title">申请信息</div>
            <el-descriptions :column="2" border label-class-name="desc-label" class="desc">
              <el-descriptions-item label="退住日期">2048-10-15</el-descriptions-item>
              <el-descriptions-item label="退住原因">服务不符</el-descriptions-item>
              <el-descriptions-item label="备注" :span="2">
                已和家属沟通达成一致，客户回到家后将重新办理入住。
              </el-descriptions-item>
              <el-descriptions-item label="申请人">屠延桦</el-descriptions-item>
              <el-descriptions-item label="申请时间">2048-10-05 15:00:00</el-descriptions-item>
            </el-descriptions>
          </div>

          <div class="bottom-actions">
            <el-button @click="$router.back()">返回</el-button>
            <el-button type="primary">提交</el-button>
          </div>
        </div>

        <!-- 右侧：审批结果、操作记录 -->
        <div class="right">
          <div class="card">
            <div class="card-title">审批结果</div>
            <div class="result-group">
              <div class="label">审批结果</div>
              <el-radio-group v-model="approveResult">
                <el-radio :label="'同意'">审批通过</el-radio>
                <el-radio :label="'拒绝'">审批拒绝</el-radio>
                <el-radio :label="'驳回'">驳回</el-radio>
              </el-radio-group>
            </div>
            <div class="result-group">
              <div class="label">审批意见</div>
              <el-input v-model="approveComment" type="textarea" :rows="5" maxlength="200" show-word-limit placeholder="请填写审批意见" />
            </div>
          </div>

          <div class="card">
            <div class="card-title">操作记录</div>
            <div class="log">
              <div class="log-item">
                <div class="avatar">?</div>
                <div class="info">
                  <div>护理员a发起申请</div>
                  <div class="sub">护理员a（已发起）</div>
                </div>
                <div class="time">2048-10-15 09:00:00</div>
              </div>
              <div class="log-item">
                <div class="avatar">?</div>
                <div class="info">
                  <div>（角色）审批·申请审批</div>
                  <div class="sub">退住审批员（审批中）</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script setup>
const steps = ['申请退住','申请审批','解除合同','调整账单','账单审批','退住审批','费用清算']
const approveResult = ref('同意')
const approveComment = ref('')
</script>

<style scoped>
.leader-approval{background:#f5f6f8;min-height:100vh}
.wrap{max-width:1200px;margin:0 auto;padding:14px 12px}
.steps{display:flex;align-items:center;margin-bottom:12px}
.step{display:flex;align-items:center;color:#a8abb2}
.step .dot{width:24px;height:24px;border-radius:50%;border:2px solid #dcdfe6;display:flex;align-items:center;justify-content:center;margin-right:6px}
.step.active .dot{border-color:#409eff;color:#409eff}
.step .name{margin-right:8px}
.step .line{width:56px;height:1px;background:#e9eaef;margin:0 8px}
.content{display:flex;gap:12px}
.left{flex:1.3}
.right{flex:1}
.card{background:#fff;border:1px solid #ebeef5;border-radius:4px;padding:12px 14px;margin-bottom:12px}
.card-title{font-weight:600;color:#303133;margin-bottom:10px}
.desc{--el-description-table-border-color:#ebeef5}
.desc-label{width:120px}
.result-group{margin-bottom:14px}
.result-group .label{color:#606266;margin-bottom:8px}
.log-item{display:flex;align-items:flex-start;padding:10px 0;border-bottom:1px dashed #f0f0f0}
.log-item:last-child{border-bottom:none}
.avatar{width:22px;height:22px;border-radius:50%;background:#c0c4cc;color:#fff;display:flex;align-items:center;justify-content:center;margin-right:8px;margin-top:2px;font-size:12px}
.info .sub{font-size:12px;color:#909399}
.time{margin-left:auto;color:#909399;font-size:12px}
.bottom-actions{display:flex;justify-content:center;gap:12px;align-items:center}
</style>


